<template>
  <div class="photo">
    <div
      class="backToLast"
      @click="goBacklast"
    >
      <i class="iconfont icon-arrow-left">返回</i>
    </div>
    <div>
      <!-- 视频 -->
      <div class="photo-container video">
        <div class="title">视频</div>
        <div class="photo-item">
          <div class="video-cover">
            <img
              src="https://img.meituan.net/kylisean/8d7312d8398a7f7a85f62f7e74c50a1e583724.jpg@244w_244h_1c_1e"
              alt=""
              class="video-item-img"
            >
            <img
              @click="goVideoPage"
              src=""
              alt=""
              class="video-cover-play"
            >
          </div>
        </div>
      </div>
      <!-- 图片 -->
      <div class="photo-container">
        <div class="title">图片</div>
        <div class="photo-item">
          <div class="lazyimage com-img-bg video-item-img">
            <img
              src="https://img.meituan.net/kylisean/fee21d1613c8d07125dd597c72800f49588304.jpg@244w_244h_1c_1e"
              alt=""
              large="https://img.meituan.net/kylisean/fee21d1613c8d07125dd597c72800f49588304.jpg"
              class="poster"
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  methods: {
    goVideoPage() {
      this.$router.push('/show/video-page')
    },
    goBacklast() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.photo {
  background: #000;
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: #fff;
  overflow: hidden;
}
.backToLast {
  width: 56px;
  min-width: 56px;
  height: 1.5rem;
  background-color: #b4b5b6;
  border-radius: 0.5rem;
  margin: 0.3rem;
}
.photo-container.video {
  margin-bottom: 14px;
}
.photo-container {
  overflow: hidden;
  margin-left: -10px;
  margin-bottom: -10px;
}
.title {
  text-align: left;
  margin: 20px 0 10px 25px;
}
.photo-item {
  width: 33.33%;
  height: 122px;
  float: left;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.video-cover {
  position: relative;
}
.video-item-img {
  width: 100%;
  height: 122px;
}
.video-cover-play {
  position: absolute;
  width: 34px !important;
  height: 34px !important;
  margin: auto;
  overflow: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.poster {
  width: 100%;
  height: 100%;
}
</style>
